<template>
<!--recharge.wxml-->
<form @submit="submitRechange">
    <view class="pd-bg-fff">
        <view class="balance">
            您的当前余额 :  <text class="co-red">{{userMoney}}</text> 元 
        </view>
        <view class="recharge">
            <view class="title">充值金额 : </view>
            <input type="number" placeholder="请输入充值金额" maxlength="10" name="money" auto-focus></input> 
        </view>
        <view class="recharge recharge-way">
            <view>充值方式 : </view>
            <view class="pic-wrap"><image class="wh100" src="/static/images/wx-pay2.png"></image></view>
        </view>
    </view>
    <button class="recharge-btns" form-type="submit">充 值</button>
</form>
</template>

<script>
var app = getApp();
var pay = require("../../../utils/pay.js");

export default {
  data() {
    return {
      userMoney: 0
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    this.setData({
      userMoney: options.money
    });
  },
  methods: {
    /** 提交充值 */
    submitRechange: function (e) {
      var money = parseFloat(e.detail.value.money);

      if (isNaN(money) || money < 0.01) {
        return app.globalData.showTextWarining('请输入有效金额');
      }

      pay.rechange(money, function () {
        uni.navigateBack();
      });
    }
  }
};
</script>
<style>
/* recharge.wxss */
.balance{
    font-size: 28rpx;
    line-height: 120rpx;
    color: #444;
    border-bottom: 1px solid #f3f3f3;
}
.recharge{
    display: flex;
    align-items: center;
    height: 120rpx;
    font-size: 28rpx;
    color: #444;
    border-bottom: 1px solid #f3f3f3;
}
.recharge .title{
    word-break: keep-all;
    white-space: nowrap;
}
.recharge input{
    height: 120rpx;
    margin-left: 30rpx;
}
.pic-wrap{
    margin-left: 30rpx;
    width: 240rpx;
    height: 72rpx;
}
.pd-bg-fff{
    background: #fff;
    border-radius: 10rpx;
    overflow: hidden;
    width: 710rpx;
    margin: 0 auto;
    margin-top: 20rpx;
    box-sizing: border-box;
}
.recharge-btns{
    margin: 60rpx auto 0;
    width: 580rpx;
    height: 88rpx;
    font-size: 28rpx;
    line-height: 88rpx;
    text-align: center;
    color: #fff;
    background-color: #ff6a00;
    border-radius: 10rpx;
}
.co-red{
    font-weight: bold;
}
</style>